<template>
      <div id="app">
           <jitter :start.sync="beginZ" :range="{ z: 10 }" class="form-group">
                <label class="form-title">密码</label>
                <input class="form-control" type="password" placeholder="密码"/>
            </jitter>
            <button @click="jitterZ">垂直屏幕抖起来</button>
            <hr/>

            <jitter :start.sync="beginX" :range="{ x: 10 }" class="form-group">
                <label class="form-title">密码</label>
                <input class="form-control" type="password" placeholder="密码"/>
            </jitter>
            <button @click="jitterX">水平抖起来</button>
            <hr/>

            <jitter :start.sync="beginY" :range="{ y: 10 }" class="form-group">
                <label class="form-title">密码</label>
                <input class="form-control" type="password" placeholder="密码"/>
            </jitter>
            <button @click="jitterY">垂直抖起来</button>
            <hr/>

            <jitter :start.sync="beginXY" :range="{ x: 10, y: 10 }" class="form-group">
                <label class="form-title">密码</label>
                <input class="form-control" type="password" placeholder="密码"/>
            </jitter>
            <button @click="jitterXY">水平垂直抖起来</button>
      </div>
</template>
<style  lang="scss" scoped>
    #app{
    padding: 20px 100px;
    }

    .form-control{
    outline: none;
    padding: 8px 10px;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    transition: border-color,box-shadow .3s;
    &:focus{
        box-shadow: 0 0 4px rgba(#348FEE, 0.8);
        border-color: rgba(#348FEE, 0.8);
    }
    input{
        border: none;
        height: 100%;
        width: 100%;
    }
}
</style>
<script>
import Jitter from './components/Jitter';
  export default {
    name: 'VueJitter',
    data() {
      return {
        beginX: false,
        beginY: false,
        beginZ: false,
        beginXY: false,
        }
    },
    components: {
        Jitter,
    },
     mounted() {
    },
  methods: {
       jitterX() {
        this.beginX = true;
        },
        jitterY() {
        this.beginY = true;
        },
        jitterZ() {
        this.beginZ = true;
        },
        jitterXY() {
        this.beginXY = true;
        }
    },

  }
</script>